﻿window.onload=start;
function start(){
	var slider={
		deg:20,
		ori:0.01,
		height:20,
		noticeBoard:document.getElementById("notice"),
		pic:document.getElementById("gallary").getElementsByTagName("div"),
		left:document.getElementById("left"),
		right:document.getElementById("right"),
		year:document.getElementById("years"),
		len:null,
		start:-340,
		end:null,
		yearIndex:{"2012":[-159.99 ,-500],"2010":[-39.99,-380],"2011":[-79.99,-420]},
		init:function(){
			this.len=this.pic.length;
			this.end=this.start-(this.len-19)*20,
			document.addEventListener("keyup",slider.keyboardMove,false);
			slider.left.addEventListener("click",slider.moveLeft,false);
			slider.right.addEventListener("click",slider.moveRight,false);
			slider.year.addEventListener("change",slider.jumpTo,false);
			this.moveTo();
		},
		moveTo:function(){
			for(var i=0;i<slider.len;i++){
				var degree=i*slider.deg+slider.ori;
				var y=i*slider.height+slider.start;
				var styleString="-webkit-transform:rotate3d(0,1,0,"+degree+"deg) translate3d(0px,"+y+"px,0px) scale3d(1,1,1);";
				styleString+="-moz-transform:rotate3d(0,1,0,"+degree+"deg) translate3d(0px,"+y+"px,0px) scale3d(1,1,1);";
				styleString+="-o-transform:rotate3d(0,1,0,"+degree+"deg) translate3d(0px,"+y+"px,0px) scale3d(1,1,1);";
				styleString+="-ms-transform:rotate3d(0,1,0,"+degree+"deg) translate3d(0px,"+y+"px,0px) scale3d(1,1,1);";
				slider.pic[i].setAttribute("style",styleString);
			}
		},
		keyboardMove:function(e){
			key=e.keyCode||e.which;
			switch(e.keyCode) {
			   case 37:slider.moveLeft();break;
			   case 39:slider.moveRight();break;// right
			}
			console.log(slider.ori+" "+slider.start);
			return false;
		},
		moveLeft:function(){
			if(slider.start==slider.end){
				slider.notice("到尾了.")
			}else{
				slider.start-=20;slider.ori-=20;
			} 
			slider.moveTo();
		},
		moveRight:function(){    
			if(slider.start==20){
				slider.notice("到头了.");
			}else{ 
				slider.start+=20;slider.ori+=20;
			}
			slider.moveTo();
		},
		jumpTo:function(){
			var year=slider.year.value;
			slider.ori=slider.yearIndex[year][0];
			slider.start=slider.yearIndex[year][1];
			slider.moveTo();
		},
		notice:function(msg){   //显示提示信息
			slider.noticeBoard.innerHTML=msg;
			slider.noticeBoard.style.display="block";
			setTimeout(hideNotice,2000);
			function hideNotice(){
				slider.noticeBoard.style.display="none";
			}
		}
	}
	slider.init();
}